<script setup lang="ts">
  import dayjs from 'dayjs'
  import { reactive, onMounted, ref } from 'vue'
  import { useRoute } from 'vue-router';
  import Basic from './basic.vue'
  import Config from './config.vue'
  import { useCurrentInstance } from '@/common/utils/methods';
  import { ResponseType } from '@/common/types/response';
  const { $axios, $message, branchId, brandId } = useCurrentInstance();
  const { query: { planId, paperId } } = useRoute();
  const data = reactive({
    activeName: 'basic',
    detailInfo: {},
    basic: {
      title: '',
      brief: '',
      coverUrl: {
        url: ''
      }
    },
    config: {
      testAgain: 1,
      isForce: 0,
      cycleType: 1,
      startTm: 0,
      endTm: 0,
      cycleTimes: 1,
      timeLimit: '',
      pushType: 0,
      testAgainLimitNum: '',
      forceNotice: 0,
      paperId
    }
  })

  const getExamDetailInfo = async () => {
    const { data: { list }, code, msg } = await $axios.post('/training.exam.api/plan/list', {
      branchId,
      brandId,
      planIds: [planId],
      pageNo: 1,
      pageSize: 1
    })

    if (code === '200') {
      const { 
        title, brief, coverUrl: { url },
        testAgain, isForce, cycleType, startTm, endTm, cycleTimes, timeLimit
      } = list[0];
      data.detailInfo = list[0];
      data.basic = {
        title,
        brief,
        coverUrl: {
          url: url
        }
      }
      data.config = {
        ...data.config,
        testAgain,
        isForce,
        cycleType,
        startTm: Number(startTm),
        endTm: Number(endTm),
        cycleTimes,
        timeLimit
      }
    } else {
      $message.error(msg)
    }
  }
  interface basicFormType {
    value: {
      basicFormData: {
        title: string
        brief: string
      }
      goBack: Function
    },
    [propName: string]: any
  }
  interface configFormType {
    value: {
      configFormData: {
        cycleType: number
        cycleTimes: number
        startTm: number
        endTm: number
      }
    },
    [propName: string]: any
  }
  const basicRef = ref() as any as basicFormType;
  const configRef = ref() as any as configFormType;
  const verifyFormData = () => {
    const { 
      cycleType, 
      cycleTimes,
      startTm, 
      endTm 
    } = configRef.value.configFormData;

    const { title, brief } = basicRef.value.basicFormData;

    // 校验基础规则
    if (!title || !brief) {
      data.activeName = 'basic';
      return;
    }

    // 校验配置规则
    if (cycleType === 1) {
      if (!dayjs().isBefore(+startTm, 'date')) {
        $message.error('开始时间必须为次日及以后')
        data.activeName = 'config'
        return
      }
      if (!dayjs().isBefore(+endTm, 'date')) {
        $message.error('结束时间必须为次日及以后')
        data.activeName = 'config'
        return
      }
      if (
        !dayjs(endTm).isSame(dayjs(+startTm), 'date') &&
        dayjs(+endTm).isBefore(dayjs(+startTm), 'date')
      ) {
        $message.error('开始时间必须小于结束时间')
        data.activeName = 'config'
        return
      }
    } else if (cycleType === 2) {
      if (!dayjs().isBefore(dayjs(+startTm), 'date')) {
        $message.error('开始时间必须为次日及以后')
        data.activeName = 'config'
        return
      }
      if (cycleTimes <= 0) {
        $message.error('循环次数必须大于0')
        data.activeName = 'config'
        return
      }
    } else if (cycleType === 3) {
      if (!dayjs().isBefore(dayjs(+startTm), 'week') || dayjs(+startTm).day() !== 1) {
        $message.error('开始时间必须为次周及以后的周一')
        data.activeName = 'config'
        return
      }
      if (cycleTimes <= 0) {
        $message.error('循环次数必须大于0')
        data.activeName = 'config'
        return
      }
    } else if (cycleType === 4) {
      if (!dayjs().isBefore(dayjs(+startTm), 'month')) {
        $message.error('开始时间必须为次月')
        data.activeName = 'config'
        return
      }
      if (cycleTimes <= 0) {
        $message.error('循环次数必须大于0')
        data.activeName = 'config'
        return
      }
    }
    

    $axios.post('/training.exam.api/plan/create', {
      ...data.detailInfo,
      ...configRef.value.configFormData,
      ...basicRef.value.basicFormData,
      startTm: configRef.value.configFormData['startTm'] + '',
      endTm: configRef.value.configFormData['endTm'] + '',
      branchId, brandId,
      opsType: planId ? 2 : 1,
    }).then((res: ResponseType) => {
      if (res.code === '200') {
        $message.success('操作成功');
        basicRef.value.goBack();
      }
    })
  }

  onMounted(() => {
    if (planId) { // 编辑时，获取详情
      getExamDetailInfo()
    }
  })
</script>

<template>
  <el-tabs type="border-card" v-model="data.activeName">
    <el-tab-pane label="基本信息" name="basic">
      <Basic ref="basicRef" v-model:basic="data.basic" @verify="verifyFormData"/>
    </el-tab-pane>
    <el-tab-pane label="考试配置" name="config">
      <Config ref="configRef" v-model:config="data.config" @verify="verifyFormData"/>
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped></style>